<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工管理 - 考勤管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            padding: 30px;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #667eea;
        }
        
        .header h1 {
            color: #667eea;
            font-size: 28px;
        }
        
        .back-btn {
            background: #6c757d;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            text-decoration: none;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .back-btn:hover {
            background: #5a6268;
        }
        
        .toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            gap: 15px;
        }
        
        .search-box {
            flex: 1;
            display: flex;
            gap: 10px;
        }
        
        .search-box input, .search-box select {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
        }
        
        .search-box input {
            flex: 1;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
            font-weight: bold;
        }
        
        .btn-primary {
            background: #667eea;
            color: white;
        }
        
        .btn-primary:hover {
            background: #5568d3;
        }
        
        .btn-success {
            background: #28a745;
            color: white;
        }
        
        .btn-success:hover {
            background: #218838;
        }
        
        .btn-danger {
            background: #dc3545;
            color: white;
        }
        
        .btn-danger:hover {
            background: #c82333;
        }
        
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        
        .btn-secondary:hover {
            background: #5a6268;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        table thead {
            background: #667eea;
            color: white;
        }
        
        table th, table td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        table tbody tr:hover {
            background: #f8f9fa;
        }
        
        .status-badge {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .status-active {
            background: #d4edda;
            color: #155724;
        }
        
        .status-inactive {
            background: #f8d7da;
            color: #721c24;
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }
        
        .modal.show {
            display: flex;
        }
        
        .modal-content {
            background: white;
            padding: 30px;
            border-radius: 15px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        }
        
        .modal-header {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #667eea;
        }
        
        .modal-header h2 {
            color: #667eea;
            font-size: 22px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: bold;
        }
        
        .form-group input, .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
        }
        
        .form-group input:focus, .form-group select:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .form-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-top: 20px;
        }
        
        .message {
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: none;
        }
        
        .message.success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
            display: block;
        }
        
        .message.error {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
            display: block;
        }
        
        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }
        
        .empty {
            text-align: center;
            padding: 40px;
            color: #999;
        }
        
        .user-bar {
            background: rgba(102, 126, 234, 0.1);
            padding: 10px 15px;
            border-radius: 10px;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .user-bar span {
            color: #667eea;
            font-weight: bold;
        }
        
        .logout-btn {
            padding: 6px 12px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 12px;
        }
        
        .logout-btn:hover {
            background: #5568d3;
        }
    </style>
    <script src="/js/auth.js"></script>
</head>
<body>
    <div class="container">
        <div class="user-bar">
            <span id="userInfo">👤 加载中...</span>
            <button class="logout-btn" onclick="logout()">🚪 退出</button>
        </div>
        
        <div class="header">
            <h1>👥 员工管理</h1>
            <a href="index.html" class="back-btn">← 返回首页</a>
        </div>
        
        <div id="message" class="message"></div>
        
        <div class="toolbar">
            <div class="search-box">
                <input type="text" id="searchInput" placeholder="搜索员工姓名或工号...">
                <select id="statusFilter">
                    <option value="">全部状态</option>
                    <option value="1">在职</option>
                    <option value="0">离职</option>
                </select>
                <button class="btn btn-primary" onclick="loadEmployees()">🔍 搜索</button>
            </div>
            <button class="btn btn-success" onclick="showAddModal()">➕ 新增员工</button>
        </div>
        
        <div id="tableContainer">
            <div class="loading">加载中...</div>
        </div>
    </div>
    
    <!-- 新增/编辑员工模态框 -->
    <div id="employeeModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modalTitle">新增员工</h2>
            </div>
            <form id="employeeForm">
                <div class="form-group">
                    <label for="empNo">工号 <span style="color: red;">*</span></label>
                    <input type="text" id="empNo" required placeholder="例如：E1003">
                </div>
                <div class="form-group">
                    <label for="name">姓名 <span style="color: red;">*</span></label>
                    <input type="text" id="name" required placeholder="例如：张三">
                </div>
                <div class="form-group">
                    <label for="dept">部门</label>
                    <input type="text" id="dept" placeholder="例如：技术部">
                </div>
                <div class="form-group">
                    <label for="status">状态</label>
                    <select id="status">
                        <option value="1">在职</option>
                        <option value="0">离职</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="hiredAt">入职日期</label>
                    <input type="date" id="hiredAt">
                </div>
                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" onclick="closeModal()">取消</button>
                    <button type="submit" class="btn btn-success">保存</button>
                </div>
            </form>
        </div>
    </div>
    
    <script>
        let employees = [];
        let currentEditId = null;
        
        // 页面加载时获取员工列表
        window.addEventListener('load', () => {
            loadEmployees();
        });
        
        // 加载员工列表
        async function loadEmployees() {
            const statusFilter = document.getElementById('statusFilter').value;
            let url = '/api/employees';
            
            if (statusFilter !== '') {
                url += `?status=${statusFilter}`;
            }
            
            try {
                const response = await fetch(url);
                const result = await response.json();
                
                if (result.code === 200) {
                    employees = result.data;
                    renderTable();
                } else {
                    showMessage('加载失败: ' + result.message, 'error');
                }
            } catch (error) {
                showMessage('网络错误: ' + error.message, 'error');
            }
        }
        
        // 渲染表格
        function renderTable() {
            const container = document.getElementById('tableContainer');
            const searchText = document.getElementById('searchInput').value.toLowerCase();
            
            // 过滤数据
            const filteredEmployees = employees.filter(emp => 
                emp.name.toLowerCase().includes(searchText) || 
                emp.empNo.toLowerCase().includes(searchText)
            );
            
            if (filteredEmployees.length === 0) {
                container.innerHTML = '<div class="empty">暂无员工数据</div>';
                return;
            }
            
            let html = `
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>工号</th>
                            <th>姓名</th>
                            <th>部门</th>
                            <th>状态</th>
                            <th>入职日期</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
            `;
            
            filteredEmployees.forEach(emp => {
                const statusClass = emp.status === 1 ? 'status-active' : 'status-inactive';
                const statusText = emp.status === 1 ? '在职' : '离职';
                const hiredAt = emp.hiredAt ? new Date(emp.hiredAt).toLocaleDateString('zh-CN') : '-';
                const createdAt = emp.createdAt ? new Date(emp.createdAt).toLocaleString('zh-CN') : '-';
                
                html += `
                    <tr>
                        <td>${emp.id}</td>
                        <td><strong>${emp.empNo}</strong></td>
                        <td>${emp.name}</td>
                        <td>${emp.dept || '-'}</td>
                        <td><span class="status-badge ${statusClass}">${statusText}</span></td>
                        <td>${hiredAt}</td>
                        <td>${createdAt}</td>
                        <td>
                            <button class="btn btn-primary" style="padding: 5px 10px; font-size: 12px;" onclick="showEditModal(${emp.id})">编辑</button>
                            <button class="btn btn-danger" style="padding: 5px 10px; font-size: 12px;" onclick="deleteEmployee(${emp.id})">删除</button>
                        </td>
                    </tr>
                `;
            });
            
            html += '</tbody></table>';
            container.innerHTML = html;
        }
        
        // 显示新增模态框
        function showAddModal() {
            currentEditId = null;
            document.getElementById('modalTitle').textContent = '新增员工';
            document.getElementById('employeeForm').reset();
            document.getElementById('employeeModal').classList.add('show');
        }
        
        // 显示编辑模态框
        function showEditModal(id) {
            currentEditId = id;
            const employee = employees.find(e => e.id === id);
            
            if (!employee) return;
            
            document.getElementById('modalTitle').textContent = '编辑员工';
            document.getElementById('empNo').value = employee.empNo;
            document.getElementById('name').value = employee.name;
            document.getElementById('dept').value = employee.dept || '';
            document.getElementById('status').value = employee.status;
            
            if (employee.hiredAt) {
                const date = new Date(employee.hiredAt);
                document.getElementById('hiredAt').value = date.toISOString().split('T')[0];
            }
            
            document.getElementById('employeeModal').classList.add('show');
        }
        
        // 关闭模态框
        function closeModal() {
            document.getElementById('employeeModal').classList.remove('show');
            document.getElementById('employeeForm').reset();
            currentEditId = null;
        }
        
        // 表单提交
        document.getElementById('employeeForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const employeeData = {
                empNo: document.getElementById('empNo').value,
                name: document.getElementById('name').value,
                dept: document.getElementById('dept').value || null,
                status: parseInt(document.getElementById('status').value),
                hiredAt: document.getElementById('hiredAt').value || null
            };
            
            try {
                let response;
                if (currentEditId) {
                    // 编辑
                    response = await fetch(`/api/employees/${currentEditId}`, {
                        method: 'PUT',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(employeeData)
                    });
                } else {
                    // 新增
                    response = await fetch('/api/employees', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(employeeData)
                    });
                }
                
                const result = await response.json();
                
                if (result.code === 200 || result.code === 201) {
                    showMessage(result.message, 'success');
                    closeModal();
                    loadEmployees();
                } else {
                    showMessage(result.message, 'error');
                }
            } catch (error) {
                showMessage('操作失败: ' + error.message, 'error');
            }
        });
        
        // 删除员工
        async function deleteEmployee(id) {
            if (!confirm('确定要删除该员工吗？')) {
                return;
            }
            
            try {
                const response = await fetch(`/api/employees/${id}`, {
                    method: 'DELETE'
                });
                
                const result = await response.json();
                
                if (result.code === 200) {
                    showMessage('删除成功', 'success');
                    loadEmployees();
                } else {
                    showMessage(result.message, 'error');
                }
            } catch (error) {
                showMessage('删除失败: ' + error.message, 'error');
            }
        }
        
        // 显示消息
        function showMessage(text, type) {
            const messageDiv = document.getElementById('message');
            messageDiv.textContent = text;
            messageDiv.className = 'message ' + type;
            
            setTimeout(() => {
                messageDiv.className = 'message';
            }, 3000);
        }
        
        // 点击模态框外部关闭
        document.getElementById('employeeModal').addEventListener('click', (e) => {
            if (e.target.id === 'employeeModal') {
                closeModal();
            }
        });
    </script>
</body>
</html>

